<template>
    <div class="app_data">
        <div class="title">
            <h2>租金预测</h2>

        </div>
        <div class="update">
                <Form ref="formInline" :model="searchParams" :rules="searchParams" inline style="text-align: center;padding-top: 20px;">
                    <div>
                        <FormItem prop="search">
                            <Select v-model="searchParams.city_code" style="width:200px" placeholder="请选择城市" @on-change="cityChange(index)">
                                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                        <FormItem prop="location">
                            <Select v-model="searchParams.division" style="width:200px" placeholder="请选择市区">
                                <Option v-for="item in divisionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                        <FormItem prop="location">
                            <Select v-model="searchParams.rent_mode" style="width:200px" placeholder="请选择租赁方式">
                                <Option v-for="item in rentModeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </div>

                    <div>
                        <FormItem prop="user">
                            <Select v-model="searchParams.size" style="width:200px" placeholder="请选择面积范围">
                                <Option v-for="item in sizeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                        <FormItem prop="xueli">
                            <Select v-model="searchParams.orientation" style="width:200px" placeholder="请选择朝向">
                                <Option v-for="item in orientationList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </div>
                    <div>
                        <FormItem>
                            <Button type="success" @click="handleSubmit('formInline')">开始预测</Button>
                            <Button style="margin-left: 10px" type="default" @click="reset()">重置</Button>
                        </FormItem>
                    </div>

                </Form>
                <div class="xinzi">
                    <div class="xinzi_d">
                        <span class="xinzi_x" v-if="xinzi > 0" >预测结果：</span>
                        <span class="xinzi_x" v-if="xinzi > 0" >{{ xinzi }} 元/月</span>
                        <p v-if="xinzi > 0" >（结果仅供参考）</p>
                        <span v-if="xinzi == 0" >暂无结果，请爬取更多数据或更换查询条件重试</span>
                    </div>
                </div>
        </div>

    </div>
</template>
<script>
import {yuce, getDivisionList , getOrientationList, getDict} from "../api";
export default {
    data() {
        return {
            searchParams: {
                city_code:'sh',
                rent_mode:'',
                orientation:'',
                division:'',
                size:'',
            },
            log:'',
            xinzi:-1,
            cityList : [],
            rentModeList : [
                {label:'整租',value:'整租'},
                {label:'合租',value:'合租'}
            ],
            orientationList : [],
            sizeList:[
                {value:'0',label:'小于50㎡'},
                {value:'1',label:'50㎡-90㎡'},
                {value:'2',label:'90㎡-120㎡'},
                {value:'3',label:'大于120㎡'}
            ],
            divisionList:[]
        }
    },
    mounted() {
        this.getDict()
        this.getOrientationList()
        this.cityChange()
    },
    methods:{
        async getOrientationList() {
            const res = await getOrientationList()
            res.info.forEach(item => {
                const orientation = {}
                orientation.value = item.value
                orientation.label = item.name
                this.orientationList.push(orientation)
            })
        },
        async getDict() {
            const res = await getDict()
            res.info.forEach(item => {
                const city = {}
                city.value = item.city_code
                city.label = item.city_name
                this.cityList.push(city)
            })
        },
        async cityChange() {
            const res = await getDivisionList(`city_code=${this.searchParams.city_code}`)
            this.divisionList = res.info
        },
        async handleSubmit() {
            const res = await yuce(`city_code=${this.searchParams.city_code}&rent_mode=${this.searchParams.rent_mode}&orientation=${this.searchParams.orientation}&division=${this.searchParams.division}&size=${this.searchParams.size}`)

            this.xinzi = res.info
        },
        reset(){
            this.searchParams.city_code = 'sh'
            this.searchParams.rent_mode = ''
            this.searchParams.orientation = ''
            this.searchParams.division = ''
            this.searchParams.size = ''
        }
    }
}
</script>
<style>
.app_data {
    width: 100%;
    height: 100%;
    background: #ffffff;
    padding: 0 200px;
    font-family: "Open Sans", sans-serif;
    color: #444;
}

.title {
    margin: 4px auto;
    padding: 30px;
    text-align: center;
}

.title h2{
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 0;
    color: #5c768d;
}

.title span{
    font-size: 16px;
    color: #444;
    font-family: "Open Sans", sans-serif;
}

.update {
    background: #f5f9fc;
}
.xinzi{
    padding: 10px 50px 50px 50px;
    text-align: center;
    height: 375px;
}
.xinzi_d{
    background: #e8e9f3;
    height: 100%;
    padding: 100px 0 0 0;
    width: 50%;
    margin-left: 25%;
    text-align: center;
}
.xinzi_x{
    font-family: emoji;
    font-size: 32px;
    color: #f55512;
    font-weight: 600;
}
</style>
